<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud"  @row-del="rowDel" @on-load="onLoad">
            <template #test="{ row }">
                <el-tag type="success" v-if="row.test === 'GET'">{{ row.test }}</el-tag>
                <el-tag type="primary" v-else>{{ row.test }}</el-tag>
            </template>
            <template #test2="{ row }">
                <div>{</div>
                <div>{{ row.test2 }}</div>
                <div>}</div>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive } from 'vue';
// import {getList} from "@/api/user/overview.js";


let option: any = reactive({
    rowKey: 'id', // 使用expand属性时必须配置rowKey为你行数据的主键，不能重复
    height: 'auto',
    // calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: false,
    delBtn: true,
    addBtn: false,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    menu: true,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    column: [
        {
            label: "ID",
            prop: "ID",
            sortable: true,
            span: 24,
        },
        {
            label: "用户",
            prop: "account",
            span: 24,
        },
        {
            label: "方法",
            prop: "test",
            span: 24,
        },
        {
            label: "路径",
            prop: "path",
            span: 24,
        },
        {
            label: "IP",
            prop: "test1",
            span: 24,
        },
        {
            label: "输入",
            prop: "test2",
            width: 200,
            span: 24,
        },
        {
            label: "创建时间",
            prop: "test3",
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: []
})
  // 删除
  const rowDel = (form, index, done) => {
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        ElMessage.success("删除成功");
        done(form); // 删除逻辑，此处暂未实现删除功能
      })
      .catch(() => {});
  };
  
const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            ID: '9411',
            account: '源码商城ymeso.com',
            test: 'GET',
            path: 'ymfxz/auth/operation-logs',
            test1: '142.4.117.3 ',
            test2: '"filter-ip": "45.142.158.236"',
            test3: '2024-07-05 23:38:44',
        },
        {
            ID: '9411',
            account: '源码商城ymeso.com',
            path: 'ymfxz/auth/operation-logs',
            test: 'GET',
            test1: '142.4.117.3 ',
            test2: '"filter-ip": "45.142.158.236"',
            test3: '2024-07-05 23:38:44',
        },
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //      crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss"></style>